<template>
	<view>
		<!-- 店铺修改 -->
		<view style="margin: 10rpx 20rpx;">
			<button @click="shopModifyShow()" style="background-color: #ebc504; ">修改店铺信息</button>
			<view v-show="shopModify" class="mask"></view>
			<view v-show="shopModify" class="popup" 
			style="width: 85%;height: 650rpx;background-color: white;top: 0;left: 0;right: 0;bottom: 20%;margin: auto;border-radius: 20rpx;">
				<view>
					店铺名称:
					<uni-easyinput v-model="shopName"></uni-easyinput>
				</view>
				<view>
					<image @click="modifyImage()" :src="shopImage" style="height: 130rpx; width: 130rpx;margin:30rpx 30rpx 10rpx 30rpx;"></image>
					点击修改店铺图片
				</view>
				<view>
					位置信息:
					<uni-easyinput v-model="shopAddress"></uni-easyinput>
				</view>
				<view>
					电话号码:
					<uni-easyinput v-model="shopPhone"></uni-easyinput>
				</view>
				<view>
					店铺详情:
					<uni-easyinput type="textarea" v-model="shopInfo"></uni-easyinput>
				</view>
				<view style="display: flex;justify-content: center;">
					<button @click="shopModifySubmit()" style="background-color: #fad104; margin: 20rpx 60rpx; ">确定</button>
					<button @click="shopModifyDisappear()" style="background-color: #c4c4c4; margin: 20rpx 60rpx;">取消</button>
				</view>
			</view>
		</view>
		
		<!-- 菜品修改 -->
		<view style="float: right;">
			<button @click="addDish()" size="mini" style="background-color: #fad104; margin: 20rpx 60rpx; ">添加菜品</button>
		</view>
		<view>
			<uni-table border stripe emptyText="暂无更多数据" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="60">菜品名称</uni-th>
					<uni-th align="center" width="30">图片</uni-th>
					<uni-th align="center" width="30">价格</uni-th>
					<uni-th align="center" width="50">售卖状态</uni-th>
					<uni-th align="center" width="50"></uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in dishList" :key="index">
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center"><image :src="item.image" style="height: 80rpx; width: 80rpx;"></image></uni-td>
					<uni-td align="center">￥{{ item.price }}</uni-td>
					<uni-td align="center">
						<view v-if="item.status===1"><view style="background-color: #1dc779;border-radius: 50%;width: 15rpx;height: 15rpx;"></view>
						起售</view>
						<view v-else><view style="background-color: #919191;border-radius: 50%;width: 15rpx;height: 15rpx;"></view>
						停售</view>
					</uni-td>
					<uni-td>
						<view class="uni-group">
							<button @click="modifyDish(item)" size="mini" type="primary">修改</button>
							<button @click="deleteDish(item)" size="mini" type="warn">删除</button>
							<button @click="stopDish(item)" v-if="item.status===1" size="mini" style="background-color: #7e7e7e; color: white;" hover-class="is-hover">停售</button>
							<button @click="launchDish(item)" v-else size="mini" style="background-color: #ebb207; color: white;">启售</button>
						</view>
					</uni-td>
				</uni-tr>
				
			</uni-table>
		</view>
		<!-- 菜品添加及修改弹窗 -->
		<view v-show="dishPopup" class="mask"></view>
		<view v-show="dishPopup" class="popup" 
		style="width: 85%;height: 850rpx;background-color: white;top: 0;left: 0;right: 0;bottom: 20%;margin: auto;border-radius: 20rpx; padding: 20rpx 20rpx;">
			<scroll-view scroll-y="true"style="height: 840rpx;">
				<view>
					菜品名称:
					<uni-easyinput v-model="currentDish.name"></uni-easyinput>
				</view>
				<view>
					
					<image v-if="currentDish.image!==''" @click="modifyDishImage()" :src="currentDish.image" style="height: 130rpx; width: 130rpx;margin:30rpx 30rpx 10rpx 30rpx;"></image>
					<image v-else src="/static/image/上传图片.png" @click="modifyDishImage()" style="height: 130rpx; width: 130rpx;margin:30rpx 30rpx 10rpx 30rpx;"></image>
					<view v-if="currentDish.image!==''" style="color: #7e7e7e; font-size: 39rpx;">点击修改菜品图片</view>
					<view v-else style="color: #7e7e7e; font-size: 39rpx;">点击上传菜品图片</view>
				</view>
				<view>
					菜品信息:
					<uni-easyinput type="textarea" v-model="currentDish.description"></uni-easyinput>
				</view>
				<view>
					价格:
					<uni-easyinput @input="timeInPort(currentDish,'price',$event)" type="digit" v-model="currentDish.price"></uni-easyinput>
				</view>
				<view>
					口味数据:
					<view  v-for='(item,index) in currentDish.flavors' :key='index' style="margin: 0rpx 20rpx;">
						<view style="margin-right:300rpx;margin-top: 35rpx;margin-left :10rpx;margin-bottom: 20rpx; display: flex;"> 
							<uni-easyinput placeholderStyle="color:#aaa" placeholder="请输入口味名称" v-model="currentDish.flavors[index].name" clearSize="0" inputBorder="false"
							 style="width: 300rpx"></uni-easyinput>
							 <uni-icons @click="clearFlavor(index)" type="trash-filled" color="#e4ca01" size="30"></uni-icons>
						</view>
						<uni-row>
							<uni-col :span="8" v-for="(flavor,index1) in item.value" :key='index1' style="display: flex;">
								<view style="position: relative;margin: 10rpx 10rpx;">
									<uni-easyinput placeholder="请输入详细口味" v-model="currentDish.flavors[index].value[index1]" clearSize="0" inputBorder="false" ></uni-easyinput>
									<uni-icons @click="minusFlavor(index,index1)" style="position: absolute;right: -24rpx;top: -22rpx;" type="minus" color="#e4ca01" size="18"></uni-icons>
								</view>
								
							</uni-col>
						</uni-row>
						<view>
							<uni-icons @click="plusFlavor(index)" type="plus" color="#e4ca01" size="25" ></uni-icons>
						</view>
					</view>
					<view style="margin-left:10rpx ;">
						<button @click="addFlavor()" style="background-color: #ebc504; " size="mini">添加口味</button>
					</view>
				</view>
				
				<view style="display: flex;justify-content: center;">
					<button @click="dishModifySubmit()" style="background-color: #fad104; margin: 20rpx 60rpx; ">确定</button>
					<button @click="dishModifyDisappear()" style="background-color: #c4c4c4; margin: 20rpx 60rpx;">取消</button>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {adminBaseUrl} from '../../config/config.js'
	export default {
		data() {
			return {
				shopModify: false,
				username: '',
				shopId: -1,
				shopName: '',
				shopImage: '',
				shopAddress: '',
				shopPhone: '',
				shopInfo: '',
				dishList: [],
				currentDish: {},
				dishPopup: false,
				isAdd: false,
			}
		},
		onLoad() {
			this.username=uni.getStorageSync('empUsername')
			this.shopId=uni.getStorageSync('empShopId')
			this.loadShop(this.username)
		},
		onShow() {
			this.loadDish()
		},
		methods: {
			shopModifyShow(){
				this.shopModify=true
				this.loadShop(this.username)
			},
			shopModifySubmit(){
				let token = uni.getStorageSync('empToken')
				uni.request({
					url:adminBaseUrl+'/shop/modify',
					method:'PUT',
					header: {
						'token': token,
					},
					data:{
						id: this.shopId,
						name: this.shopName,
						image: this.shopImage,
						address: this.shopAddress,
						phone: this.shopPhone,
						info: this.shopInfo
					},
					success: (res) => {
						if(res.data.code==1){
							uni.showToast({
								title: '操作成功',
							})
						}
						this.loadShop(this.username)
					}
				})
				this.shopModify=false
			},
			shopModifyDisappear(){
				this.shopModify=false
			},
			loadShop(username){
				let token = uni.getStorageSync('empToken')
				uni.request({
					url: adminBaseUrl + '/employee/getShop?username=' + username,
					method: 'GET',
					header: {
						'token': token,
					},
					success: (res) => {
						//console.log(res.data.data)
						this.shopName=res.data.data.name
						this.shopImage=res.data.data.image
						this.shopAddress=res.data.data.address
						this.shopPhone=res.data.data.phone
						this.shopInfo=res.data.data.info
						this.shopId=res.data.data.id
					},
					fail: (res) => {
						
					}
				})
			},
			modifyImage(){
				let token = uni.getStorageSync('empToken')
				let that=this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					camera: 'back',
					success(res) {
						let file=res.tempFiles[0] //获取file格式
						//console.log(file)
						uni.uploadFile({
							url: adminBaseUrl+'/common/upload',
							filePath: file.tempFilePath,
							name: 'file',
							header: {
								'token': token,
							},
							success:(res)=>{
								res.data=JSON.parse(res.data)
								that.shopImage=res.data.data
							},
							fail:()=>{
								console.log('接口调用失败')
							}
						})
					}	
				})
			},
			loadDish(){
				let token = uni.getStorageSync('empToken')
				uni.request({
					url: adminBaseUrl + '/dish/list?shopId=' + this.shopId,
					method: 'GET',
					header: {
						'token': token,
					},
					success: (res) => {
						this.dishList=res.data.data
						this.$forceUpdate()
						//console.log(this.dishList)
					},
					fail: (res) => {
						
					}
				})
			},
			addDish(){
				this.isAdd=true
				this.currentDish={
					id: -1,
					name: '',
					image: '',
					description: '',
					price: '',
					shopId: this.shopId,
					status: 0,
					flavors: []
				}
				this.dishPopup=true
			},
			modifyDish(item){
				this.currentDish=item
				//console.log(item.flavors)
				if(item.flavors){
					for(let i=0;i<item.flavors.length;i++)
						item.flavors[i].value=JSON.parse(item.flavors[i].value)
					this.dishPopup=true
				}
			},
			deleteDish(item){
				//删除菜品
				let token=uni.getStorageSync('empToken')
				let that =this
				uni.showModal({
					content: '是否删除该菜品',
					success: (res) => {
						if(res.confirm){
							uni.request({
								url:adminBaseUrl+'/dish/'+item.id,
								method:'DELETE',
								header: {
									'token': token,
								},
								success(res) {
									if(res.data.code===1){
										uni.showToast({
											title: '删除成功'
										})
									}
									//加载数据
									that.loadDish()
								}
							})
						}
						else if(res.cancel){
							uni.showToast({
								title: '取消删除菜品'
							})
						}
					}
					
				})
			},
			launchDish(item){
				let token=uni.getStorageSync('empToken')
				let that =this
				//启用菜品
				uni.request({
					url:adminBaseUrl+'/dish/status/1?dishId='+item.id,
					method:'POST',
					header: {
						'token': token,
					},
					success(res) {
						if(res.data.code===1){
							uni.showToast({
								title: '启用成功'
							})
						}
						//加载数据
						that.loadDish()
					}
				})
			},
			stopDish(item){
				let token=uni.getStorageSync('empToken')
				let that =this
				//禁用菜品
				uni.request({
					url:adminBaseUrl+'/dish/status/0?dishId='+item.id,
					method:'POST',
					header: {
						'token': token,
					},
					success(res) {
						if(res.data.code===1){
							uni.showToast({
								title: '禁用成功'
							})
						}
						//加载数据
						that.loadDish()
					}
				})
			},
			modifyDishImage(){
				//修改菜品图片
				let token = uni.getStorageSync('empToken')
				let that=this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					camera: 'back',
					success(res) {
						let file=res.tempFiles[0] //获取file格式
						//console.log(file)
						uni.uploadFile({
							url: adminBaseUrl+'/common/upload',
							filePath: file.tempFilePath,
							name: 'file',
							header: {
								'token': token,
							},
							success:(res)=>{
								res.data=JSON.parse(res.data)
								that.currentDish.image=res.data.data
							},
							fail:()=>{
								console.log('接口调用失败')
							}
						})
					}	
				})
				
				
			},
			dishModifySubmit(){
				//先判断各类字段是否为空
				if(this.currentDish.name&&this.currentDish.price&&this.currentDish.image){
					//都不为空
					this.currentDish.price=parseFloat(this.currentDish.price)
				}
				else {
					//弹窗
					uni.showModal({
						showCancel:false,
						title:'必须填写菜品名称,图片和价格'
					})
					return
				}
				//关闭弹窗
				this.dishPopup=false
				
				let token=uni.getStorageSync('empToken')
				
				for(let i=0;i<this.currentDish.flavors.length;i++){
					this.currentDish.flavors[i].value=JSON.stringify(this.currentDish.flavors[i].value)
					//console.log(this.currentDish.flavors[i].value)
				}
				let that = this
				//console.log(this.currentDish.flavors)
				if(this.isAdd===true){
					
					//添加菜品
					//console.log(this.currentDish)
					uni.request({
						url:adminBaseUrl+'/dish/add',
						method:'POST',
						header: {
							'token': token,
						},
						data: this.currentDish,
						success(res) {
							if(res.data.code===1){
								uni.showToast({
									title: '添加成功'
								})
							}
							//加载数据
							that.loadDish()
						}
					})
				}
				else{
					//修改菜品
					//console.log(this.currentDish)
					uni.request({
						url:adminBaseUrl+'/dish/modify',
						method:'PUT',
						header: {
							'token': token,
						},
						data: this.currentDish,
						success(res) {
							if(res.data.code===1){
								uni.showToast({
									title: '修改成功'
								})
								
							}
							//加载数据
							that.loadDish()
						}
					})
				}
				this.isAdd=false
			},
			dishModifyDisappear(){
				this.isAdd=false
				this.dishPopup=false
				this.loadDish()
			},
			timeInPort(scope,field,value) {
			    // 校验-只能输入数字和小数点
			    let val = value.replace(/(^\s*)|(\s*$)/g, "")
				// 保证第一位只能是数字，不能是点
				val = val.replace(/^\./g, "");
				// 小数只能出现1位
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				// 小数点后面保留2位
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
			    if (!val) {
			        //this.data.loadNum = '';
			        return
			    }
			    var reg = /[^\d.]/g
			    			       
			    // 只能是数字和小数点，不能是其他输入
			    val = val.replace(reg, "")
				this.$nextTick(()=>{
					this.$set(scope,field,val)
				})
				
			},
			clearFlavor(index){
				this.currentDish.flavors.splice(index,1)
			},
			minusFlavor(index,index1){
				//console.log('minus')
				this.currentDish.flavors[index].value.splice(index1,1)
			},
			plusFlavor(index){
				this.currentDish.flavors[index].value.push('新口味')
			},
			addFlavor(){
				if(!this.currentDish.flavors){
					this.currentDish.flavors=[]
				}
				this.currentDish.flavors.push({
					id: null,
					dishId: this.currentDish.id,
					name: '',
					value: ['']
				})
			}
		}
	}
</script>

<style>
.mask {
  position: fixed;
  /* 使遮罩层铺满整个页面 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  /* 通过z-index属性，使遮罩层在弹出层之下 */
  z-index: 1;
}

/* 弹出层样式 */
.popup {
  position: fixed;
  z-index: 2;
}
.is-hover {
	color: rgba(210, 210, 210, 0.6);
	background-color: #e4e4e4;
}
</style>
